<!DOCTYPE html><html><head><title>05-选择器初级和背景详解</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="05-选择器初级和背景详解">05-选择器初级和背景详解</h1>

<h3 id="一命名规范">一、命名规范</h3>



<h5 id="1html命名规范">1、HTML命名规范：</h5>

<blockquote>
  <p>1)、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 <br>
  2)、所有的命名最好都用英文小写 <br>
  3)、标签属性必须使用成对引号（单引号或双引号） <br>
  4)、标题标签的定义应遵循从大到小的原则，体现文档的结构，有利于搜索引擎的查询。 <br>
  5)、尽量不缩写，除非一看就明白的单词 <br>
  6)、表现层与结构层完全分离，代码中尽量不涉及任何的表现元素</p>
</blockquote>



<h4 id="2css命名规范">2、css命名规范：</h4>

<blockquote>
  <p>1)、使用类选择器，尽量避免使用ID选择器定义样式 <br>
  2)、以字母开头命名选择器 <br>
  3)、全小写，并使用 ’ - ’ 连字符 <br>
  4)、命名应简约而不失语义。避免过度简写，<code>.ico</code>足够表示这是一个图标，而<code>.i</code>不代表任何意思</p>
</blockquote>



<h4 id="3命名的2种方式">3、命名的2种方式：</h4>

<blockquote>
  <p>1)、ID命名：具有唯一性(身份证号)，相同的ID名只能在页面中出现一次，并且ID只能有一个名字。 <br>
  2)、class类名：class的类名可以在页面中重复出现，并且一个元素可以有多个类名,(中间以空格分开)。</p>
</blockquote>



<h3 id="二选择器初级">二、选择器初级</h3>

<p>二、选择器初级</p>

<table><tbody><tr style="font-weight:bold">  <td align="center">选择器</td>  <td align="center">名称</td>  <td align="center">选择范围</td></tr><tr>  <td align="center"><code>*</code></td>  <td align="center"><code>通配符</code></td>  <td align="center">选择<code>所有</code>标签</td></tr><tr>  <td align="center"><code>tag</code></td>  <td align="center"><code>标签选择器</code></td>  <td align="center">选择所有<code>相同标签名称</code>的标签</td></tr><tr>  <td align="center"><code>class</code></td>  <td align="center"><code>类选择器</code></td>  <td align="center">选择<code>类</code>名称相同的标签</td></tr><tr>  <td align="center"><code>#id</code></td>  <td align="center"><code>id选择器</code></td>  <td align="center">选择<code>ID</code>名称相同的标签</td></tr><tr>  <td align="center"><code>div p a</code></td>  <td align="center"><code>后代/包含选择器</code></td>  <td align="center">选择作为<code>某元素后代</code>的元素</td></tr><tr>  <td align="center"><code>div,p ,a</code></td>  <td align="center"><code>群组/分组选择器</code></td>  <td align="center">选择<code>其中有相同名称</code>的元素</td></tr></tbody></table>



<h3 id="三background背景样式">三、background背景样式</h3>

<p>语法：<strong>background:</strong><code>color image repeat position/size;</code></p>

<blockquote>
  <p>background-color       背景颜色 <br>
  background-image       背景图片    url(‘路径’); <br>
  background-size        背景尺寸 <br>
  background-repeat      背景平铺 <br>
  background-attachment      背景固定 <br>
  background-position    背景位置</p>
</blockquote>

<p>1、<strong>background-size</strong>：背景图片的大小</p>

<blockquote>
  <ul><li><code>length</code>：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度,如果只设置一个值，则第二个值会被设置为 “auto”。</li>
  <li><code>percentage</code>:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度,如果只设置一个值，则第二个值会被设置为 “auto”。</li>
  <li><code>cover</code>：等比例缩放直到铺满X轴和Y轴</li>
  <li><code>contain</code>：等比例缩放X轴或Y轴其中一个方向   </li>
  </ul>
</blockquote>

<p>2、<strong>background-repeat</strong>：背景平铺 </p>

<blockquote>
  <ul><li><code>no-repeat</code> : 不平铺</li>
  <li><code>repeat-x</code>: X方向平铺</li>
  <li><code>repeat-y</code>:  Y方向平铺</li>
  <li><code>repeat</code>:  平铺  ，默认值</li>
  </ul>
</blockquote>

<p>3、<strong>background-attachment </strong> ：背景固定</p>

<blockquote>
  <ul><li><code>scroll</code>  : 随网页滚动而滚动</li>
  <li><code>fixed</code> :  固定在body中</li>
  </ul>
</blockquote>

<p>4、<strong>background-position </strong>: X Y;    默认是：0% 0%       </p>

<blockquote>
  <ul><li><strong>X 轴</strong>的值： <br>
  <ul>
  <li>方位值： <br>
  <ul>
  <li><code>left</code>左对齐</li>
  <li><code>center</code>水平居中   </li>
  <li><code>right</code> 右对齐</li></ul></li>
  <li>百分比 %</li>
  <li>px</li></ul></li>
  <li><strong>Y 轴</strong>的值: <br>
  <ul>
  <li>方位值： <br>
  <ul>
  <li><code>top</code> 顶部对齐</li>
  <li><code>center</code>垂直居中 </li>
  <li><code>bottom</code> 底部对齐</li></ul></li>
  <li>百分比 %</li>
  <li>px</li></ul></li>
  </ul>
</blockquote>

<p><code>注</code>：如果只给一个值，那么第二个值默认center（50%）；X轴的值和Y轴的值如果给的是方位值：位置可以颠倒。</p></div></body></html>